<template>
    <el-dialog class="jzb-dialog" :title="title" :visible.sync="visibleDialog" :width="width" id="dept-dialog-choose" :close-on-click-modal="false" v-dialogDrag>
        <div class="mainer">
            <el-transfer v-model="choosedKeys" :data="data" :props="props" :titles="titles" :filterable="filterable" :filter-placeholder="keywordPlaceholder"></el-transfer>
        </div>
        <el-footer height="auto" class="jzb-dialog-footer">
            <div class="flex1">已选数量：{{choosedKeys.length}}</div>
            <el-button name="btn-submit" size="medium" type="primary" icon="el-icon-receiving" @click="saveData()">保存</el-button>
            <el-button name="btn-cancel" size="medium" icon="el-icon-close" @click="visibleDialog=false">取 消</el-button>
        </el-footer>
    </el-dialog>
</template>
<script>
/** 组件功能：穿梭选择
* 传入：props
* 输出：list
*/
import _ from 'lodash';
export default {
    name:"el-transfer-list",
    props:{
        // 配置项
        title:{ type: String, default: '选择项目' }, //对话框title
        visible:{ type: Boolean, default: false }, //对话框显示
        filterable:{ type: Boolean, default: true }, //是否初始化本单位信息
        width:{ type: String, default: '800px' }, //对话框宽度
        props:{ type:Object,default:{key:'key',label:'label'}},
        value:{ type: Array, default:()=>{return []}}, //默认已选列表
        data:{ type: Array, default:()=>{return []}}, //可选列表
        keywordPlaceholder:{ type: String, default: '请输入关键字搜索' },
        titles:{ type: Array, default:()=>{return ['可选列表', '已选列表']}}
    },
    data(){
        return {
            //1.基本
            visibleDialog:false,
            choosedKeys:[],
            choosedList:[],
        };
    },    
    watch:{
        value(val){
            this.choosedKeys = val.map(item=>item[this.props.key])
        },
        visible(val){
            this.visibleDialog = val;
        },
        visibleDialog(val){
            if(!val) this.$emit('close');
        },
    },
    methods:{
        saveData(){
            this.choosedList = this.data.filter(item=>this.choosedKeys.includes(item[this.props.key]))
            this.$emit('input',this.choosedList);
            this.$emit('change',this.choosedList);
            this.visibleDialog = false;
        },
    },
};
</script>
<style lang="less" scoped>
@import "~@/assets/style/base.css";
@import "~@/assets/style/common.less";
/deep/.el-transfer-panel{width:298px;
    .el-transfer-panel__body{height:346px;}
    .el-transfer-panel__list.is-filterable{height:294px;}
}
</style>